<!-- 机构违法受处罚信息公开库 -->
<template>
    <div>
        <page-main>
            <!-- 头部搜索板块 -->
            <div style="margin-top: 15px; padding-left: 10px;">
                <el-input v-model="punAgentName" class="search" size="medium" clearable style="border-radius: 15px; overflow: hidden; vertical-align: bottom;" placeholder="请输入机构名称" />
                <el-date-picker v-model="searchTime" class="search" size="medium" clearable type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" style="border-radius: 15px; overflow: hidden; margin-left: 10px; vertical-align: bottom;" @clear="initSafety" />
                <el-button type="primary" size="small" round icon="el-icon-search" style="margin-left: 20px;" @click="initSafety">搜索</el-button>
                <el-button type="add" icon="el-icon-plus" style="float: right; margin-right: 50px;" @click="showAddMechView">添加违法信息</el-button>
            </div>
            <!-- 中间表格板块 -->
            <div style="margin-top: 20px;">
                <el-table :data="safety" stripe border style="width: 100%;">
                    <el-table-column prop="punAgentName" label="违法机构名称" align="center" />
                    <el-table-column prop="illegaAction" label="违法事实" align="center" />
                    <el-table-column prop="punishment" label="处罚决定" align="center" />
                    <el-table-column prop="punishTime" label="处罚时间" align="center" width="170" />
                    <el-table-column prop="enforceAgen" label="执法机关" align="center" width="200" />
                    <el-table-column label="操作" align="center" width="160">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="editIllegalInfo(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteMechs(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                    <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
                </div>
            </div>
            <!-- 添加违法信息弹框 -->
            <el-dialog title="添加机构违法受罚信息" :visible.sync="dialogVisible" width="35%" center>
                <el-form ref="mechForm" :label-position="labelPosition" :model="illegal" :rules="rules" label-width="100px">
                    <el-form-item label="机构名称:" prop="punAgentName">
                        <el-select v-model="illegal.punAgentName" placeholder="请选择违法机构" style="width: 200px;">
                            <el-option v-for="(item,index) in AgentName" :key="index" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="违法事实:" prop="illegaAction">
                        <el-input v-model="illegal.illegaAction" type="textarea" prefix-icon="el-icon-edit" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入违法事实" style="width: 250px;" />
                    </el-form-item>
                    <el-form-item label="处罚决定:" prop="punishment">
                        <el-input v-model="illegal.punishment" prefix-icon="el-icon-edit" placeholder="请输入处罚决定" clearable style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="处罚时间:" prop="punishTime">
                        <el-date-picker v-model="illegal.punishTime" type="date" placeholder="选择执法时间" clearable style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="执法机关:" prop="enforceAgen">
                        <el-input v-model="illegal.enforceAgen" prefix-icon="el-icon-edit" placeholder="请输入执法机关" clearable style="width: 200px;" />
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAddIllegal">确 定 添 加</el-button>
                </span>
            </el-dialog>
            <!-- 编辑违法处罚信息弹框 -->
            <el-dialog title="编辑机构违法受处罚信息" :visible.sync="dialogVisible1" width="35%" center>
                <div class="tag">
                    <el-tag>违法机构名称</el-tag>
                    <el-input v-model="edit.punAgentName" clearable class="updateProfGroup" />
                </div>
                <div class="tag">
                    <el-tag>违法事实</el-tag>
                    <el-input v-model.trim="edit.illegaAction" type="textarea" prefix-icon="el-icon-edit" class="updateProfGroup" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入违法事实" @input="change($event)" />
                </div>
                <div class="tag">
                    <el-tag>处罚决定</el-tag>
                    <el-input v-model.trim="edit.punishment" placeholder="请输入处罚决定" clearable class="updateProfGroup" @input="change($event)" />
                </div>
                <div class="tag">
                    <el-tag>处罚时间</el-tag>
                    <el-date-picker v-model.trim="edit.punishTime" type="date" placeholder="选择执法时间" class="updateProfGroup" clearable @input="change($event)" />
                </div>
                <div class="tag">
                    <el-tag>执法机关</el-tag>
                    <el-input v-model.trim="edit.enforceAgen" placeholder="请输入执法机关" clearable class="updateProfGroup" @input="change($event)" />
                </div>
                <span slot="footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="savaEdit">确 定</el-button>
                </span>
            </el-dialog>
        </page-main>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'OrganizationIllegalInformationIndex',
    data() {
        return {
            labelPosition: 'left',
            punAgentName: '', // 搜索功能机构名称
            searchTime: '', // 搜索功能选择时间
            edit: {}, // 编辑违法信息数据绑定
            safety: [],
            total: 0,
            page: 1,
            size: 10,
            dialogVisible: false,
            dialogVisible1: false,
            illegal: {},
            AgentName: [], // 机构下拉框选择
            rules: { // 校验,与prop名对应
                punAgentName: [
                    { required: true, trigger: 'change', message: '请选择机构名称' }
                ],
                illegaAction: [
                    { required: true, trigger: 'blur', message: '请输入违法事实' }
                ],
                punishment: [
                    { required: true, trigger: 'blur', message: '请输入处罚决定' }
                ],
                punishTime: [
                    { required: true, trigger: 'change', message: '请选择处罚时间' }
                ],
                enforceAgen: [
                    { required: true, trigger: 'blur', message: '请输入执法机关' }
                ]
            }
        }
    },
    created() {
        this.initSafety()
        this.initAgentName()
    },
    methods: {
        savaEdit() { // 确认保存编辑的违法处罚信息
            this.putRequest('/system/punishment/updatePunishMent', this.edit).then(resp => {
                if (resp) {
                    this.dialogVisible1 = false
                    Message.success('更新成功')
                    this.initSafety()
                }
            })
        },
        change() {
            this.$forceUpdate()
        },
        editIllegalInfo(row) { // 编辑违法处罚信息按钮
            this.edit = row
            this.dialogVisible1 = true
        },
        initAgentName() { // 获取‘机构’下拉选择信息
            this.getRequest('/system/punishment/getAllAgentName').then(resp => {
                if (resp) {
                    this.AgentName = resp.data
                }
            })
        },
        doAddIllegal() { // 添加违法处罚信息确定事件
            this.$refs['mechForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/punishment/addPunishMent', this.illegal).then(resp => {
                        if (resp) {
                            this.dialogVisible = false
                            Message.success('添加成功')
                            this.initSafety()
                        }
                    })
                }
            })
        },
        showAddMechView() { // 添加违法处罚信息按钮绑定事件
            this.dialogVisible = true
        },
        deleteMechs(data) { // 删除一条信息
            this.$confirm('此操作将永久删除机构  ' + data.punAgentName + ' 违法信息, 是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/punishment/deletePunishMent', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initSafety()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initSafety() { // 分页获取已经开具的处罚信息
            var obj = {page: this.page, size: this.size, punAgentName: this.punAgentName, searchTime: (this.searchTime).toString()}
            this.getRequest('/system/punishment/getPunishMent', obj).then(resp => {
                if (resp) {
                    this.safety = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        sizeChange(size) { // 分页页数
            this.size = size
            this.initSafety()
        },
        currentChange(currentPage) { // 分页当前页触发
            this.page = currentPage
            this.initSafety()
        }
    }
}
</script>

<style lang="scss" scoped>
.search { // 搜索框
    border: solid #0080ff;
    width: 250px;
    border-radius: 12px;
}
::v-deep .el-icon-search { // 搜索的图标
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
}
.el-button--add { // 添加机构按钮
    background-color: rgb(250, 136, 136);
    color: #f5f2f0;
}
::v-deep .el-dialog__body {
    display: inline-block;
    padding-bottom: 10px;
}
.updateProfGroup {
    width: 250px;
    margin-left: 8px;
}
.tag {
    margin-top: 20px;
    margin-left: 30px;
}
</style>

